<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
  <link rel="stylesheet" href="css/mystyle.css">
</head>
<body style="height: 3000px;position: relative;">

<!--
<div id="box1">
  <div id="box2">
    <div id="box3">
      <div id="box4">

      </div>
    </div>
  </div>
</div>

<input id="in" placeholder="未点击输入框"><br>
<a id="a" href="red.html">点击链接</a>

<script type="text/javascript">
  function func() {
    alert('sunck is a nice man!')
  }
  var div3 = document.getElementById("box3")
  div3.onclick = function () {
alert(" handsome man")
  }
  /* 之前的函数会被覆盖 */
   div3.onclick = function () {
alert(" handsome man----1")
  }
  /* 清除函数,两种方法，第一 */
//   div3.onclick = null

   var div4 = document.getElementById("box4")
  function f(){
    alert(" handsome man")
  }
  div4.addEventListener("click",f,false)
  /* 之前的函数不会被覆盖 */
  div4.addEventListener("click",f,false)
  /* 清除函数,两种方法，第二 */
//  div4.removeEventListener("click",f,false)

  function func(self) {
  console.log(self)
    self.style.backgroundColor = "black"
    alert("nice man")
  }
</script>
<input type="text" id="in" value="">
  /* 聚焦、离焦事件 */
  var input = document.getElementById("in")
  input.addEventListener("focus",function () {
console.log("聚焦事件")
  },false)
   input.addEventListener("blur",function () {
     console.log("离开焦点事件")
   },false)
  /* 单击、双击事件 */
  var div4 = document.getElementById("box4")
  var timer
  div4.addEventListener("click",function () {
    clearTimeout(timer)
    timer = setTimeout(function () {
    console.log("单击")
    },300)
  },false)

  div4.addEventListener("dblclick",function () {
    clearTimeout(timer)
    console.log("双击")
  },false)


<ul>
  <li>鼠标进入变红</li>
  <li>鼠标离开变蓝</li>
  <li>鼠标按下字体大2倍</li>
  <li>鼠标抬起字体小2倍</li>
</ul>

<script>
  var li = document.getElementsByTagName("li")
  for(var i =0;i<li.length;i++){

    li[i].addEventListener("mouseover",function () {
  this.style.backgroundColor = "red"
    })
    li[i].addEventListener("mouseout",function () {
  this.style.backgroundColor = "blue"
    })
      li[i].addEventListener("mousedown",function () {
  this.style.fontSize = parseInt(getComputedStyle(this,null).fontSize)*2+"px"
    })
      li[i].addEventListener("mouseup",function () {
  this.style.fontSize = parseInt(getComputedStyle(this,null).fontSize)/2+"px"
    })
  /* 给整个文档加鼠标移动事件 */
    document.addEventListener("mousemove",function () {
console.log("鼠标移动了")
    },false)
  }
  /* 键盘对象 */
    document.addEventListener("keydown",function (e) {
  var event = e || window.event
      console.log(event)
      console.log(event.altKey,event.ctrlKey,event.shiftKey,event.key,event.keyCode)
 })
      document.addEventListener("keyup",function (e) {
  var event = e || window.event
      console.log(event)
      console.log("-----------------------")
 })
  /* 鼠标对象 */
    document.addEventListener("click",function (e) {
  var eve = e || window.event
      console.log(eve.clientX,eve.clientY,eve.pageX,eve.pageY)
      // console.log()
 })
 </script>

 <script>
  var div1 = document.getElementById("box1")
      var div2 = document.getElementById("box2")
      var div3 = document.getElementById("box3")
      var div4 = document.getElementById("box4")
    div1.addEventListener("click",function () {
console.log(div1)
    },false)
    div1.addEventListener("click",function () {
console.log(div2)
    },false)
    div1.addEventListener("click",function () {
console.log(div3)
    },false)
    div1.addEventListener("click",function () {
console.log(div4)
    },false)

  document.body.onclick = function () {
this.style.backgroundColor = "yellow"
  }

  document.getElementById("box4").onclick = function (e) {
this.style.backgroundColor = "red"
    var evt = e || window.event
     evt.stopPropagation()
  }
  document.getElementById("in").onclick = function (e) {
    this.setAttribute("placeholder","点击了输入框")
var evt = e || window.event
    evt.stopPropagation()
  }
  document.getElementById("a").onclick = function (e) {
    var evt = e || window.event
    evt.stopPropagation()
    var info = window.confirm("是否确认访问")
    if(info == false){
      evt.preventDefault()
      }
    }
</script>

-->

<div id="box1" style="position: absolute;"></div>
<script>
    jsDiv = document.getElementById("box1")
    basex = 0
    basey = 0
    movex = 0
    movey = 0
    jsDiv.addEventListener("mousedown",function (e) {
    var evt = e || window.event
    /* pageX,pageY是鼠标的位置 */
    basex = evt.pageX
    basey = evt.pageY
    console.log(basex,basey)
    console.log("鼠标落下")

    document.onmousemove = function (e) {
      var ee = e || window.event
      movex = ee.pageX - basex
      basex = ee.pageX

      movey = ee.pageY - basey
      basey = ee.pageY
      console.log(basex,basey)
      jsDiv.style.left = jsDiv.offsetLeft + movex + "px"
      jsDiv.style.top = jsDiv.offsetTop + movey + "px"
      console.log(jsDiv.style.left,jsDiv.style.top)
    }
  },false)

  /* 抬起鼠标后，不再移动 */
  document.addEventListener("mouseup",function () {
    console.log("鼠标抬起")
    document.onmousemove = null

  },false)
</script>

</body>
</html>
